<template>
  <div>
    <!-- <el-form ref="form" :model="form" label-width="110px" enctype="multipart/form-data"
      label-position="right" style="margin-top: 20px;">
      <el-row :gutter="24">
        <el-col :sm="6">
          <el-form-item label="月份" name="scoreMonth">
            <el-date-picker type="month" placeholder="选择月份" v-model="form.scoreMonth"
              value-format="yyyy-MM" format="yyyy-MM" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->

    <div style="margin-right: 15px;">
      <el-upload class="upload-demo" style="float: right;margin-bottom: 5px;" action=""
        :http-request="handleUpload1" :show-file-list="false">
        <el-button type="warning" size="mini" v-if="user.roleName!='company' ">导入</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini"
        @click="clickDlTemp">导出</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini"
        @click="clickAdd">新增</el-button>
      <!-- <el-button type="success" style="float: right;margin-bottom: 5px;margin-right: 10px;"
        size="mini" @click="clickQuery">查询</el-button> -->
    </div>
    <div style="padding: 10px 20px;">
      <el-table :data="tableData" :key="key" style="width: 100%;border: solid 1px #c0c0c0;"
        row-key="index" header-row-class-name="table_header"
        :header-cell-style="{borderColor:'#C0C0C0'}" :cell-style="{borderColor:'#C0C0C0'}" border
        id="out-table">
        <el-table-column v-for="column,index in columns" :key="index" :prop="column.dataIndex"
          :label="column.title" :align="column.align" :width="column.width">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope"
            v-if="user.roleName!='company' ||  (user.userId==scope.row.createUser)  ">
            <el-button size="mini" @click="clickShowEdit(scope.$index, scope.row)">编辑</el-button>

            <el-button size="mini" type="danger"
              @click="clickDel(scope.$index, scope.row)">删除</el-button>
            <el-upload class="upload-demo" style="float: left;margin-right: 10px;"
              :data="{'eventId':scope.row.eventId}" action="" :http-request="uploadAttach"
              :show-file-list="false">
              <el-button type="success" size="mini">上传文件</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column label="审核" align="center" width="75px" v-if="user.roleName!='company'">
          <template slot-scope="scope">
            <img src="@/assets/ic_unfinish.png" v-show="'Y' != scope.row.isAudit"
              style="height: 15px;width:15px;cursor: pointer;"
              @click="clickAudit( scope.row,'Y')" />
            <img src="@/assets/ic_finish.png" v-show="'Y' == scope.row.isAudit"
              style="height: 15px;width:15px;cursor: pointer;" @click="clickAudit(scope.row,'N')" />
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-pagination background layout="prev, pager, next" :total="total_size" :page-size="100"
      :current-page="page_no">
    </el-pagination>

    <UpdateModal ref="UpdateModalRef" :clickQuery="clickQuery" :saveFun="updateEmergPlan"
      :addFun="addEmergPlan" />

    <el-dialog title="删除提示" :visible.sync="delVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import UpdateModal from './updateModal';
import {
  queryEmergPlanList,
  updateEmergPlan,
  addEmergPlan,
  delEmergPlan,
  importExcel,
  uploadFile,
  updateAudit,
} from '@/service/emergPlan';
import columns from './table';
import { getCurrUser } from '@/common/constants';

// import { tableMixin } from '@/mixin/table';
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
export default {
  components: { UpdateModal },
  // mixins: [tableMixin],

  data() {
    return {
      user: {},
      data: [],
      key: Math.random(),
      pagination: {
        showLessItems: true,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      query: {},
      columns: columns,
      currItem: {},
      page_no: 0,
      page_size: 100,
      form: {},
      tableLoading: false,
      tableData: [],
      total_size: 0,
      loading: false,
      updateEmergPlan,
      addEmergPlan,
      queryEmergPlanList,
      delVisible: false,
    };
  },

  methods: {
    clickShowEdit(index, record) {
      this.$refs.UpdateModalRef.openEditDialog({ ...record });
    },
    clickAdd(record) {
      this.$refs.UpdateModalRef.openAddDialog();
    },
    clickDel(index, row) {
      this.delVisible = true;
      this.currItem = { ...row };
    },
    clickDlTemp(index, row) {
      console.log('XLSX', XLSX, document.querySelector('#out-table'));
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      });
      try {
        const date = new Date();
        let dateStr =
          date.getFullYear() +
          '-' +
          (date.getMonth() + 1) +
          '-' +
          date.getDate();
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream',
          }),
          '应急预案-' + dateStr + '.xlsx'
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },

    getFD(fileObj) {
      const formData = new FormData();
      formData.append('file', fileObj.file);
      return formData;
    },
    async handleUpload1(fileObj) {
      const fd = this.getFD(fileObj);
      let res = await importExcel(fd);
      if (res.success) {
        this.clickQuery();
      }
      return false;
    },

    async clickAudit(record, isAudit) {
      let res = await updateAudit({ ...record, isAudit });
      if (res.success) {
        this.clickQuery();
      }
    },

    async uploadAttach(params) {
      // console.log('params', params);
      const fd = this.getFD(params);
      fd.append('eventId', params.data.eventId);
      let res = await uploadFile(fd);
      if (res.success) {
        this.clickQuery();
      }
      return false;
    },

    async handleDelete() {
      this.delVisible = false;
      const res = await delEmergPlan({
        ...this.currItem,
      });
      if (res.success) {
        this.clickQuery();
      } else {
      }
    },

    async clickQuery() {
      this.loading = true;
      const data = await queryEmergPlanList({
        ...this.form,
        page_no: this.page_no,
        page_size: this.page_size,
      });
      if (data.success) {
        this.total_size = data.total;
        this.tableData = data.dataList;
      } else {
        this.total_size = 0;
        this.tableData = [];
      }
      this.loading = false;
    },

    // updateEmergPlan(){

    // }
  },
  created() {
    // const date = new Date();
    // const currMonth = date.getFullYear() + '-' + (date.getMonth() + 1);
    // this.$set(this.form, 'scoreMonth', currMonth);
    // this.form.scoreMonth = currMonth;
    // console.log('this.form.currMonth', this.form.currMonth);
  },

  mounted() {
    console.log('ff:' + this.tableData);
    console.log('ff11:' + this.clickQuery);
    this.user = getCurrUser();
    this.clickQuery(queryEmergPlanList);
  },
};
</script>
<style scoped>
/deep/ .table_header th {
  background-color: #e3e3e3 !important;
  height: 40px;
}
::v-deep .el-table .el-table__cell {
  padding: 4px 0px;
}
</style>